<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.org/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1">
    <title>layui布局</title>
    <!--第一步，引入layui的资源-->
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}">
</head>
<body>
<!--在body下引入js资源-->
<script th:src="@{/resources/layui/layui.js}"></script>
<!--开始写，layui的资源-->
<script th:inline="none">//此处有坑，需要设置“th:inline="none"”
//一般直接写在一个js文件中
//同时，在layui中引入table表格
layui.use(['layer', 'form', 'table','element'], function () {
    var layer = layui.layer
        , form = layui.form
        , table = layui.table
        , $ = layui.jquery,
     element = layui.element;
    /*
     * 单击表格中的操作选项
     * table.on(tool(xx))这里的xx是和 lay-filter="xx"对应
     */
    //表格渲染
    var tableIns=table.render({
        elem: '#applyTable',//指定表格的id选择器
        height: 312,
        url: '/apply/auditInfo',
        id: 'applyListTable',//表格的索引
        //表格的分页
        page: true,
        limits: [5, 10, 15, 20],
        limit: 5,
        //表格数据的回填方法
        done:function(res){
            if(res.code==201||res.code==402){
                layer.msg(res.message);
            }
        },
        cols: [[
            {field: 'id', title: '编号', width: 80, sort: true},
            {field: 'reason', title: '用车理由'},
            {field: 'destination', title: '目的地'},
            {field: 'starttime', title: '开始时间'},
            {field: 'endtime', title: '预计结束时间'},
            {field: 'information', title: '备注信息'},
            {field: 'applytime', title: '订单提交时间'},
            {field: 'peoplenum', title: '随行人数'},
            //templet 状态的判断
            {
                field: 'available', title: '状态', templet: function (obj) {
                    if( obj.available == 1){
                    return '审核通过'
                }
                if( obj.available == 0){
                    return '审核不通过'
                }
                if( obj.available == 2){
                    return '未审核'
                }
                return obj.available;
            }
            },
            {title: '操作',width: 250,templet:'#applyListBtn',fixed:'right',align:'center'}
        ]]
    })

    $("#apply1").click(function () {
    //代开子页面
    var index=layui.layer.open({
        //type 对应好1到五的值 不同的值可以传递不同的属性
        type:2,
        title:'申请用车',
        content:'goApply',
        area:['800px','500px'],
        success:function(layero,index){
            var body=layer.getChildFrame('body',index);
            //少了这个是 不能从父页面向子页面传值的
            //向content的值隐藏传递值
            var id= document.getElementById("userId").value;
              body.find("#userId").val(id);
            //这样就将值传递给子页面中id为userIdHiden的隐藏域
        },
        btn:['确定','取消'],
        yes:function (index,layero) {
            //子页面向符页面传值 窗口对象window["layui-layer-iframe"+index]
            var res=window["layui-layer-iframe"+index].callbackdata();
            $.ajax({
                type:'post',
               url:'/apply/addApply',
                data: {
                    uid:res.uid,
                    information:res.information,
                    peoplenum:res.peoplenum,
                    destination:res.destination,
                    starttime:res.starttime,
                    endtime:res.endtime,
                    reason:res.reason,
                },
                traditional:true,
                success:function(res){
                    layui.layer.close(index);
                }}
            )
        },
        btn2:function (index,layero) {
            layui.layer.close(index);
        }
    })
})
    /*
     * 单击表格中的操作选项
     * table.on(tool(xx))这里的xx是和 lay-filter="xx"对应
     */
    table.on("tool(applyList)",function (obj) {
        //获取当前行的数据
        var data =obj.data;
        switch (obj.event) {
            case "audit":
                audit(data);
                break;
        }
    })
    function audit(data){
        //代开子页面
        var index=layui.layer.open({
            //type 对应好1到五的值 不同的值可以传递不同的属性
            type:2,
            title:'审核信息',
            content:'goauditIsInfo',
            area:['500px','300px'],
            success:function(layero,index){

                var body=layer.getChildFrame('body',index);
                //少了这个是 不能从父页面向子页面传值的
                //向content的值隐藏传递值
                body.find("#uid").val(data.id);
                //这样就将值传递给子页面中id为userIdHiden的隐藏域

            },
            btn:['审核通过','审核不通过'],
            yes:function (index,layero) {
                //子页面向符页面传值 窗口对象window["layui-layer-iframe"+index]
                var res=window["layui-layer-iframe"+index].callbackdata();
                console.log(res)
                $.ajax({
                    url:'auditstatus',
                    data: {
                        id:(res.id),
                        vehicleid:(res.vehicleid)
                    },
                    traditional:true,
                    success:function(res){
                           tableIns.reload();
                            layui.layer.close(index);
                    }}

                )
            },
            btn2:function (index,layero) {
                //子页面向符页面传值 窗口对象window["layui-layer-iframe"+index]
                var res=window["layui-layer-iframe"+index].callbackdata();
                $.ajax({
                    url:'auditstatus0',
                    data: {
                        id:(res.id)},
                    traditional:true,
                    success:function(res){
                        tableIns.reload();
                        layui.layer.close(index);
                    }}
                )
            }
        })
    }
});

//引入jquery
</script>
<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
        <li class="layui-this" id="apply1">用车申请</li>
        <li id="applyrecord">申请记录表</li>
        <li>出车记录表</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content" style="height: 600px;">
        <div class="layui-tab-item layui-show">1</div>
        <div class="layui-tab-item">
            <table id="applyTable" lay-filter="applyList" ></table>
        </div>
        <div class="layui-tab-item">3</div>
        <div class="layui-tab-item">4</div>
        <div class="layui-tab-item">5</div>
        <div class="layui-tab-item">6</div>
    </div>
</div>
<script type="text/html" id="applyListBtn">


    <shiro:hasPermission name="user:look">
        <a class="layui-btn layui-btn-xs  layui-btn-primary" lay-event="audit">审核</a>
    </shiro:hasPermission>
    <shiro:hasPermission name="user:grant">
        <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="sendcars">派送车辆</a>
    </shiro:hasPermission>
</script>
</body>
</html>